<template>
  <div class="usersMessageDiv">
    <div>
      <el-image :src="users.usersFirstImage" style="width: 980px;height: 250px" />
    </div>
    <div style="border: 1px solid #eaeaea;box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);position: relative">
      <div class="userDiv">
        <div style="margin-left: 50px;margin-top: -70px">
          <el-avatar :size="100" :src="users.usersPortrait" />
        </div>
        <div style="margin-left: 160px;margin-top: -40px">
          <h2>{{ users.usersName }}</h2>
        </div>
        <div v-if="loginUser.usersId === users.usersId" style="float: right;margin-top:-40px;margin-right: 20px">
          <el-upload :action="global.uploadUrl" :on-success="getFirstImage" :before-upload="beforeUpload" :show-file-list="false">
            <el-button type="primary" plain>点击上传背景</el-button>
          </el-upload>
        </div>
        <div style="float: right;margin-top:-40px;margin-right: 50px" v-else>
          <el-button type="primary" plain @click="toChat()">私信</el-button>
        </div>
      </div>
    </div>
    <div style="border: 1px solid #eaeaea;box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);margin-top: 10px">
        <div style="margin-left: 15px;margin-bottom: 20px">
          <el-menu mode="horizontal" :default-active="defaultActiveState">
            <el-menu-item index="1">
              <div @click="goMsgDynamic()">动态</div>
            </el-menu-item>
            <el-menu-item index="2">
              <div @click="goMsgAttention()">关注</div>
            </el-menu-item>
            <el-menu-item index="3">
              <div @click="goMsgCollect()">收藏</div>
            </el-menu-item>
          </el-menu>
        </div>
      <router-view />
    </div>
  </div>
</template>

<script>

import Navigation from "../../../../components/navigation";
import request from "../../../../utils/request";
export default {
  components:{Navigation},
  data:function (){
    return{
      activeName:"first",
      tabPosition:"left",
      collectList:[],
      usersId:'',
      dynamicUsersId:'',
      attentionUsersId:'',
      collectUsersId:'',
      loginUser:{},
      users:{},
      defaultActiveState:'0',
      usersImg:{
        usersId:0,
        usersFirstImage:''
      },
    }
  },
  methods:{
    toChat(){
      request.post('/chat/toChat/'+this.users.usersId+"/"+this.loginUser.usersId).then(res=>{
        this.$router.push("/messageCenter/chat/"+res.data.chatKey+"/"+res.data.forUsersId)
      })
    },
    beforeUpload(file) {
      let testMsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testMsg === 'jpg'
      const extension2 = testMsg === 'png'
      const isLt2M = file.size / 1024 / 1024 < 2     //这里做文件大小限制
      if(!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 jpg、png格式!',
          type: 'warning'
        });
      }
      if(!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 2MB!',
          type: 'warning'
        });
      }
      return extension || extension2 && isLt2M
    },
    getFirstImage(res){
      this.usersImg.usersFirstImage=res.msg;
      this.usersImg.usersId=this.usersId;
      request.post('/users/update', this.usersImg).then()
      this.users.usersFirstImage=this.usersImg.usersFirstImage
    },
    goMsgDynamic(){
      this.$router.push("/userHome/"+this.users.usersId)
    },
    goMsgAttention(){
      this.$router.push("/attention/"+this.users.usersId)
    },
    goMsgCollect(){
      this.$router.push("/collect/"+this.users.usersId)
    },
    initUsersMessage(){
      request('/users/getUsersMessage/+'+this.usersId).then(res=>{
        this.users=res.data
      })
    },
  },
  watch:{
    '$route.path': {
      handler(toPath){
        let usersIdRoute=this.$route.params.usersId;
        let usersRoute=JSON.parse(localStorage.getItem("userData"));
        if (toPath === ('/userHome/'+usersIdRoute)){
          this.defaultActiveState="1"
        } else if(toPath === ('/attention/'+usersRoute.usersId)){
          this.defaultActiveState="2"
        } else if(toPath === ('/collect/'+usersRoute.usersId)){
          this.defaultActiveState="3"
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  created() {
    //被查询用户ID
    this.usersId=this.$route.params.usersId;
    //登录用户
    this.loginUser=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    document.title="个人中心 - 贴乎";
    this.initUsersMessage();
  }
}


</script>

<style scoped>
.userDiv{
  margin-top: 30px;margin-left: 20px;margin-bottom: 20px;height: 90px;
}
.usersMessageDiv{
  margin: 0 auto;
  margin-top: 50px;
  max-width: 980px;
}
</style>
